

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
    <!-- Tab选项卡1 -->
    <div class="box tab1">
        <!-- 标题 -->
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <!-- 内容 -->
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>


    <!-- Tab选项卡2 -->
    <div class="box tab2">
        <!-- 标题 -->
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <!-- 内容 -->
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
</body>
<script src="./demo.js"></script>
<script>
const tab1 = new Tab('.tab1')
const tab2 = new Tab('.tab2')

// tab1.el属性 打印的自己的最大盒模型
// tab2.el属性 打印的自己的最大盒模型

// console.log(document.querySelectorAll('ul li')); // 6

// let tab2Obj = document.querySelector('.tab2')
// console.log(tab2Obj.querySelectorAll('ul li')); // 3
</script>